import {defineStore} from "pinia";
import themeConfig from "./theme.json"
import type {TabItem} from "@/types/router.ts";
import type {RouteMeta} from "vue-router";

interface State {
    darkTheme: boolean
    siderCollapsed: boolean
    headerSize: string
    siderSize: string
    siderCollapsedSize: number
    avatarSize: number
    tabs: TabItem[],
    keepAliveList: string[],
}


export const useAppStore = defineStore('app-store', {
    persist: true,
    state: (): State => {
        return {
            darkTheme: true,
            headerSize: themeConfig.layout.headerSize,
            siderCollapsed: false,
            siderSize: themeConfig.layout.siderSize,
            siderCollapsedSize: themeConfig.layout.siderCollapsedSize,
            avatarSize: themeConfig.layout.avatarSize,
            tabs: [],
            keepAliveList: [],
        }
    },
    actions: {
        toggleDarkTheme() {
            this.darkTheme = !this.darkTheme
        },
        toggleSiderCollapsed() {
            this.siderCollapsed = !this.siderCollapsed
        },
        addTab(componentName: string, path: string, mate: RouteMeta, query: any = {}) {
            if (this.tabs.some(item => item.path === path)) {
                return
            }
            this.tabs.push({
                componentName: componentName,
                icon: mate.icon,
                path: path,
                title: mate.title ?? path,
                query: query
            })
            this.keepAliveList.push(componentName)
        },
        setTabs(tabs: TabItem[]) {
            this.tabs = tabs
            this.keepAliveList = tabs.map(item => item.componentName)
        },
        clearTabs() {
            this.tabs = []
            this.keepAliveList = []
        },

    },
})
